<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Accenture Portal</title>
	<link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrap.css">
	<link rel="stylesheet" href="common/css/aboutme.css">
	<link rel="stylesheet" href="common/css/main.css">
	<script src="component/jquery-3.1.1.js"></script>
	<script src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

	<!-- head -->
	<div class="head clearfix">
		<h2 class="headtitle"><spring:message code="AccenturePortal"/></h2>
		<ul class="nav">
			<li class="navlist" style="cursor: default">
				${sessionScope.user.user_name}
			</li>
			<li class="navlist" style="cursor: default">
				<div class="headimage" style="margin-top: 13px">
					<img src="${sessionScope.user.user_image}" class="img-circle center-block" alt="">
				</div>
			</li>
			<li class="navlist">
				<span class="glyphicon glyphicon-cog dropdown-toggle" id="navbarPreferences" aria-expanded = "true"   style="margin-top: 15px"></span>
				<ul class="dropdown-menu dropdownMenu" id="preferencesTab" role="menu" style="left:-120px;top:48px;">
					<li><a href="toModifyUserPassword.action">MODIFY PASSWORD</a></li>
					<li class="divider" id="lineDivider" role="separator"></li>
					<li><a>PREFERENCES</a></li>
					<c:if test="${sessionScope.user.user_levelid eq 5}"> 
					<li class="divider" id="lineDivider" role="separator"></li>
					<li><a href="management.action">MANAGEMENT</a></li>
					</c:if>
					<li class="divider" id="lineDivider" role="separator"></li>
					<li><a href="logout.action">LOG OUT</a></li>	
				</ul>
			</li>
		</ul>
	</div>

	<!-- nav -->
	<div class="nav-center">
		<ul class="links-title">
			<li class="linkslist">
				<a href="" class="navs-links">Quick&nbsp;Links</a>
			</li>
			<li class="linkslist">
				<a href="" class="navs-links">Sell&nbsp;&nbsp;Deliver</a>
			</li>
			<li class="linkslist">
				<a href="" class="navs-links">Career&nbsp;&nbsp;Benefits</a>
			</li>
			<li class="linkslist">
				<a href="" class="navs-links">Corporate&nbsp;Services</a>
			</li>
			<li class="linkslist">
				<a href="" class="navs-links">About&nbsp;Accenture</a>
			</li>
			<li class="linkslist">
				<a href="" class="navs-links">Stay&nbsp;Connected</a>
			</li>
			<li class="linkslist">
				<a href="" class="navs-links">A&nbsp;to&nbsp;Z</a>
			</li>
		</ul>
	</div>

	<!-- carousel -->
	<div id="myCarousel" class="carousel slide" style="background: url('common/images/aboutme_background.png');">
		<div id="info">
			<center>
				<table border="0px" height="180px">
					<tr>
						<td width="100px">
							<img src="${sessionScope.user.user_image}" width="95px" height="95px" style="border-radius: 50%;"/>
						</td>
						<td align="center" width="180px">
							<font>${sessionScope.user.user_name}</font>
						</td>
						<td width="300px">
							<font>
								<spring:message code="Careerlevel"/><br />
								${sessionScope.user.user_levelid}
							</font>
						</td>
						<td width="200px">
							<font>
							<spring:message code="TalentSegment"/><br />
							${sessionScope.user.level.level_name}
							</font>
						</td>
					</tr>
				</table>
			</center>
		</div>
	</div>
	

	<!-- down -->
	<div class="down">
		<!-- search -->
		<div class="search-section">
			<div class="searchlink ">
				<input type="text" id="showsearch" class="searchinput" name="" placeholder=<spring:message code="FindSitesPeopleandMyLinks"/>>
				<span class="glyphicon glyphicon-search"></span>
			</div>
			<div id="hiddenPanel" class="panel panel-default">
				<div id="myLinksDivPrimary1" class="row" style="display:none;">
					<div id="SitesTitle" class="col-md-6">
						<h4>
							<span id="labelsTitle" class="label no-radius">Site</span>
						</h4>
						<div class="scroll" id="barScroll" people-scroll="">
                            <div class="col-md-10 col-sm-10 col-xs-12 col-lg-10">
                            	<div class="text-muted">
									<strong id="siteEmpty"/>
								</div>
                            	<div id="siteResults" style="list-style-type: none;">
            					</div>
                            </div>
                        </div>
					</div>
					<div id="PeopleTitle" class="col-md-6">
						<h4>
							<span id="labelsTitle" class="label no-radius">People</span>
						</h4>
						<div class="scroll" id="barScroll" people-scroll="">
                            <div class="col-md-10 col-sm-10 col-xs-12 col-lg-10">
                            	<div class="text-muted">
									<strong id="peopleEmpty"/>
								</div>
                            	<div id="peopleResults" class="peopleSearchProfile" style="list-style-type: none;">
            					</div>
                            </div>
                        </div>
					</div>
				</div>
				
			<script type="text/javascript">
				var form=document.getElementById('myLinksDivPrimary1');
				$(document).ready(function(){
					$("#showsearch").keyup(function(){ 
						form.style.display = 'block';
					});
				});
			</script>
				
				<div id="myLinksDivPrimary" class="row">
					<div id="myLinksTitle" class="col-md-6">
						<h4>
							<span id="labelsTitle" class="label no-radius">My Links</span>
						</h4>
					</div>
					<div id="myLinksActions" class="col-md-offset-4 col-md-2">
						<a aria-label="Left Align" ng-click="edit()">
                        	<span class="glyphicon glyphicon-pencil ac-cursor" aria-hidden="true"></span>
                    	</a>
                    	<a aria-label="Left Align" ng-click="add()">
                        	<span class="glyphicon glyphicon-plus ac-cursor" aria-hidden="true"></span>
                    	</a>
					</div>
					<!-- <div id="mylinkBack" class="col-md-offset-4 col-md-2">
						<a style="padding-left:-10px">
							<span id="myLinksBack" class="glyphicon glyphicon-chevron-left ac-cursor"></span>
						</a>
					</div> -->
				</div>
				
				<div class="row">
					<div id="overFlow">
						<div class="col-md-offset-4 col-md-6">
							<div class="col-md-offset-2 col-md-10" style="margin-left: 0">
								<div id="myLinksEmpty" class="text-muted">
									<p>You currently don’t have any My Links.</p>
									<p>Feel free to add links to your favorite websites here!</p>
								</div>
								<div id="myLinksResults" style="list-style-type: none;">
                            	</div>
							</div>
						</div>
						<div id="showForm" class="addLinksForm" style="display:none;">
                            <form name="myLinksForm" >
                                <h3 style="margin-top: 0px;">Add New Link</h3>
                                <div class="row form-space">
                                    <div class="col-md-9 col-sm-9 col-xs-9">
                                        <input class="form-control no-radius ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-maxlength" required="" type="text" maxlength="100" placeholder="Title">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-9 col-sm-9 col-xs-9">
                                        <input class="form-control no-radius ng-pristine ng-untouched ng-valid-url ng-invalid ng-invalid-required ng-valid-maxlength" required="" type="url" maxlength="100" placeholder="https://" ng-model="myLink.Url" https-prefix="">
                                    </div>
                                </div>
                                <div class="col-md-9 col-sm-9 col-xs-9" id="addMyLinksButton">
                                    <button class="btn btn-dark no-radius" type="submit" >
                                        ADD
                                    </button>
                                </div>
                            </form>
                        </div>
					</div>
				</div>
			</div>
		</div>
	
		<!-- content -->
		<div class="container maincontent">
			
			<!-- image upload -->
			<div  class="col-md-4 image upload">
				<div class="panel panel-default no-radius" style="height: 88px">
					<div class="panel-body">
						<div class="row">
							<div class="col-md-3">
								<div class="img-circle myimg">
									<img src="common/images/profle.png" alt="">
								</div>
							</div>
							<div class="col-md-7">
								<form method="post" action="upload.action" enctype="multipart/form-data">
									<h4 style="font-size: 17px;"><spring:message code="UploadImage"/></h4>
									<div class="infolist" style="text-align: center;float: left;line-height: 27px" >
										<div style="background: #4f5d73;color: #fff;cursor: pointer;width: 60px;height: 25px">
											<font><spring:message code="Upload"/></font>
										</div>
										<input type="file" name="file" style="height: 25px; width: 60px; opacity: 0; margin-top: -25px"/>
									</div>
									<div class="infolist">
										<input type="submit" style="background: #4f5d73;border: 0;color: #fff;width: 60px;height: 25px; margin-left: 10px;" value="submit" />
									</div>
								</form>
							</div>
						</div>						
					</div>
				</div>
			</div>
			
			<!-- personel number -->
			<div  class="col-md-4 pesonel number">
				<div class="panel panel-default no-radius">
					<div class="panel-body">
						<div class="row">
							<div class="col-md-3">
								<div class="img-circle myimg">
									<img src="common/images/news.png" alt="">
								</div>
							</div>
							<div class="col-md-7">
								<h4 style="font-size: 17px;"><spring:message code="PersonelNumber"/></h4>
								<div class="infolist">${sessionScope.user.user_id}</div>
							</div>
						</div>						
					</div>
				</div>
			</div>
			
			<!-- cellphone number -->
			<div  class="col-md-4 cellphone number">
				<div class="panel panel-default no-radius">
					<div class="panel-body">
						<div class="row">
							<div class="col-md-3">
								<div class="img-circle myimg">
									<img src="common/images/phone.png" alt="">
								</div>
							</div>
							<div class="col-md-7">
								<h4 style="font-size: 17px;"><spring:message code="CellphoneNumber"/></h4>
								<div class="infolist">${sessionScope.user.user_cellphone}</div>
							</div>
						</div>						
					</div>
				</div>
			</div>
			
			<!-- log out -->
			<div  class="col-md-4 cellphone number">
				<div class="panel panel-default no-radius">
					<div class="panel-body" style="height: 93px">
						<div class="row">
							<div class="col-md-3">
								<div class="img-circle myimg">
									<img src="common/images/power.png" alt="">
								</div>
							</div>
							<div class="col-md-7" style="margin-top: 15px;">
								<a href="logout.action" style="font-size: 17px;"><spring:message code="ClickHeretoLogOut"/></a>
							</div>
						</div>						
					</div>
				</div>
			</div>
			
			<!-- management -->
			<c:if test="${user.user_levelid eq 5}">
				<div  class="col-md-4 management">
					<div class="panel panel-default no-radius">
						<div class="panel-body">
							<div class="row">
								<div class="col-md-3">
									<div class="img-circle myimg">
										<img src="common/images/gear.png" alt="">
									</div>
								</div>
								<div class="col-md-7">
									<h4 style="font-size: 17px;"><spring:message code="Management"/></h4>
									<div class="infolist">
										<a href="management.action" style="font-size: 17px;"><spring:message code="ToManagementPage"/></a>
									</div>
								</div>
							</div>						
						</div>
					</div>
				</div>
			</c:if>
		</div>
	</div>
	
	<!-- footer -->	
	<div class="footer" style="position: absolute;bottom: 0">
		Copyright 2001 - 2017 Accenture. All Rights reserved. Accenture Confidential. For Internal Use Only. 
		<a href="#">Terms of Use</a> | 
		<a href="#">Privacy Statements</a>
	</div>

	<script type="text/javascript">
		$("#myCarousel").carousel('cycle');
		$("#navbarPreferences").click(function(){
		    $("#preferencesTab").toggle();
	});
	</script>
	<script type="text/javascript" src="common/js/operation.js"></script>
</body>
</html>